<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文本注音</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/bs/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/static/bs/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/static/bs/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
        .word {
            margin: 3px;
            height: 45px;
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            display:-webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .word span {
            display: block;
            text-align: center;
        }
        .title {
            margin:0 auto;   
            font-size: 18px;
            text-align: center;
            
        }
        .title_inline {
            display: inline-block;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="container"><hr/></div>
{% for param in param_list %}
<div class="container">
    {% if param %}
        {% for word in param %}
        <div class="word">
                <span>{{ word.1|safe }}</span>
                <span>{{ word.0|safe }}</span>
            </div>
        {% endfor %}
    {% else %}
        &nbsp;
    {% endif %}
</div>
{% endfor %}
<div class="container"><hr/></div>
<div class="container">
    <form action="/test/pinyin/" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <textarea class="form-control" rows="10" name="content">{{content}}</textarea>
        <p>
        <button class="btn btn-default" type="submit">显示注音</button>
        </p>
<div class="container" style="font-size: 22px;">
    <table class="table table-bordered table-condensed">
        <tr><td>ā</td><td>á</td><td>ǎ</td><td>à</td><td></td></tr>
        <tr><td>ō</td><td>ó</td><td>ǒ</td><td>ò</td><td></td></tr>
        <tr><td>ē</td><td>é</td><td>ě</td><td>è</td><td>ê</td></tr>
        <tr><td>ī</td><td>í</td><td>ǐ</td><td>ì</td><td></td></tr>
        <tr><td>ū</td><td>ú</td><td>ǔ</td><td>ù</td><td></td></tr>
        <tr><td>ǖ</td><td>ǘ</td><td>ǚ</td><td>ǜ</td><td>ü</td></tr>
    </table>
</div>
    </form>
</div>
</body>
</html>